<template>
  <div
    class="swiper-warpper"
    @mouseenter="swiperStop"
    @mouseleave="swiperStart">
    <div
      :class="{
        swiper: props.type === 'shop',
        swiper2: props.type === 'detail'
      }">
      <ul ref="swiperUl">
        <li
          v-for="swiper in props.swiperList"
          :key="swiper.id">
          <RouterLink
            :to="`/detail?goods_id=${swiper.goods_id}`"
            target="_blank">
            <img v-lazyload="swiper.imgUrl" />
          </RouterLink>
        </li>
      </ul>
      <div
        class="pointer"
        ref="pointer"
        @click="pointerHandler">
        <a
          href="javascript:;"
          v-for="(key,index) in props.swiperList!.length"
          :key="key"
          :data-pointer="index"></a>
      </div>
      <div class="prev-next">
        <a
          @click="prevImg"
          class="prev"
          href="javascript:;"></a>
        <a
          @click="nextImg"
          class="next"
          href="javascript:;"></a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, onUnmounted } from 'vue'
const props = defineProps({
  swiperList: Object,
  type: String
})
const swiperUl = ref<HTMLElement>() // 轮播图列表
const pointer = ref<HTMLElement>() // 轮播图列表
const int = ref<number>(0) // 当前的页数
let ulLength = ref<number>(0) // 图片数量
let timer: any // 定时器
/**
 * @description: 检查int是否超出范围
 */
const checkInt = () => {
  if (int.value < 0) {
    int.value = ulLength.value - 1
  } else if (int.value >= ulLength.value) {
    int.value = 0
  }
}
/**
 * @description: 上一页
 */
const prevImg = () => {
  int.value -= 1
  changeImg()
}
/**
 * @description: 下一页
 */
const nextImg = () => {
  int.value += 1
  changeImg()
}
/**
 * @description: 改变图片
 */
const changeImg = () => {
  checkInt()
  changePointer()
}
/**
 * @description: 鼠标移入停止切换
 */
const swiperStop = () => {
  clearInterval(timer)
}
/**
 * @description: 鼠标移出开始切换
 */
const swiperStart = () => {
  timer = setInterval(() => {
    nextImg()
  }, 5000)
}
/**
 * @description: 改变导航点
 */
const changePointer = () => {
  for (let i = 0; i < ulLength.value; i++) {
    if (props.type === 'shop') {
      if (pointer.value) pointer.value!.children[i].classList.remove('active')
    } else {
      if (pointer.value) pointer.value!.children[i].classList.remove('active2')
    }
  }
  if (props.type === 'shop') {
    if (pointer.value)
      pointer.value!.children[int.value].classList.add('active')
  } else {
    if (pointer.value)
      pointer.value!.children[int.value].classList.add('active2')
  }
}
const pointerHandler = (e: MouseEvent) => {
  if ((e.target as HTMLElement).nodeName.toLocaleLowerCase() === 'a') {
    int.value = Number((e.target as HTMLElement).dataset.pointer)
    changeImg()
  }
}
watch(
  () => int.value,
  (newValue, oldValue) => {
    swiperUl.value!.children[oldValue].classList.remove('firstImg')
    swiperUl.value!.children[newValue].classList.add('firstImg')
  }
)
/**
 * @description: 挂载后获取ul
 */
onMounted(() => {
  ulLength = ref(swiperUl.value!.children.length)
  swiperUl.value!.children[0].classList.add('firstImg')
  if (props.type === 'shop') {
    pointer.value!.children[0].classList.add('active')
  } else {
    pointer.value!.children[0].classList.add('active2')
  }
  swiperStop()
  swiperStart()
})

onUnmounted(() => {
  swiperStop()
})
</script>

<style lang="less" scoped>
.firstImg {
  a {
    img {
      opacity: 1;
    }
  }
}
.active {
  border-color: rgba(0, 0, 0, 0.4) !important;
  background-color: rgba(255, 255, 255.4) !important;
}
.active2 {
  background-color: #a2a2a2 !important;
}
.swiper {
  position: relative;
  width: 1226px;
  height: 460px;
  ul {
    width: 1226px;
    height: 460px;
    li {
      position: absolute;
      a {
        display: block;
      }
    }
  }
  img {
    opacity: 0;
    width: 100%;
    vertical-align: top;
    transition: 1.5s;
  }

  /* 导航点 */
  .pointer {
    position: absolute;
    bottom: 20px;
    right: 43px;
    a {
      float: left;
      width: 6px;
      height: 6px;
      margin-left: 6px;
      border: 2px solid rgba(255, 255, 255.4);
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.4);
      z-index: 999;
    }
    & a:hover {
      border-color: rgba(0, 0, 0, 0.4);
      background-color: rgba(255, 255, 255.4);
    }
  }
  /* 上下箭头 */
  .prev-next {
    a {
      position: absolute;
      width: 41px;
      height: 69px;
      top: 0;
      bottom: 0;
      margin: auto 0;
      background-image: url('@/asset/img/icon-slides.png');
      z-index: 99;
    }
    & .prev {
      background-position: -84px 0;
      left: 234px;
      &:hover {
        background-position: 0 0;
      }
    }

    & .next {
      background-position: -125px 0;
      right: 0;
      &:hover {
        background-position: -42px 0;
      }
    }
  }
}
.swiper2 {
  position: relative;
  width: 560px;
  height: 560px;
  ul {
    width: 560px;
    height: 560px;
    li {
      position: absolute;
      a {
        display: block;
      }
    }
  }
  img {
    opacity: 0;
    width: 100%;
    vertical-align: top;
    transition: 1s;
  }
  /* 导航点 */
  .pointer {
    position: absolute;
    width: 100%;
    bottom: 0px;
    display: flex;
    justify-content: center;
    a {
      float: left;
      width: 50px;
      height: 2px;
      margin-left: 6px;
      border-radius: 2px;
      background-color: #d5d5d5;
      z-index: 999;
    }
    & a:hover {
      background-color: #a2a2a2;
    }
  }
  /* 上下箭头 */
  .prev-next {
    a {
      position: absolute;
      width: 41px;
      height: 69px;
      top: 0;
      bottom: 0;
      margin: auto 0;
      background-image: url('@/asset/img/icon-slides.png');
      z-index: 9;
    }
    & .prev {
      background-position: -84px 0;
      left: 0;
      &:hover {
        background-position: 0 0;
      }
    }

    & .next {
      background-position: -125px 0;
      right: 0;
      &:hover {
        background-position: -42px 0;
      }
    }
  }
}
</style>
